<template>
  <a-modal
    title="操作"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item style="display:none">
        <a-input v-decorator="['proId']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目号">
        <a-input placeholder="项目号" v-decorator="['proNo',{rules: [{required: true, message: '请输入项目号'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目名称">
        <a-input placeholder="项目名称" v-decorator="['proName',{rules: [{required: true, message: '请输入项目名称'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关键字">
        <a-input placeholder="关键字" v-decorator="['keywords']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="归属公司">
        <a-select  style="width: 100%"  v-decorator="['entId', {rules: [{ required: true, message: '请选择归属公司' }]}]" :allowClear="true">
          <a-select-option v-for="(d,index) in companyList_TableDict" :key="index" :value="d.key" >{{ d.value }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="负责部门">
        <a-select  style="width: 100%"  v-decorator="['departId', {rules: [{ required: true, message: '请选择负责部门' }]}]" :allowClear="true">
          <a-select-option v-for="(d,index) in deptList_TableDict" :key="index" :value="d.key" >{{ d.value }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属客户">
        <a-select  style="width: 100%"  v-decorator="['custId', {rules: [{ required: true, message: '请选择所属客户' }]}]" :allowClear="true">
          <a-select-option v-for="(d,index) in costomList_TableDict" :key="index" :value="d.key" >{{ d.value }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目类型">
        <a-select  style="width: 100%"  v-decorator="['proType', {rules: [{ required: true, message: '请选择项目类型' }]}]" :allowClear="true">
          <a-select-option v-for="(d,index) in dictproTypeDictList" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工作类型">
        <a-select  style="width: 100%"  v-decorator="['workType', {rules: [{ required: true, message: '请选择工作类型' }]}]" :allowClear="true">
          <a-select-option v-for="(d,index) in workTypeDictList" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目经理">
        <a-select  style="width: 100%"  v-decorator="['pm', {rules: [{ required: true, message: '请选择项目经理' }]}]" :allowClear="true">
          <a-select-option v-for="(d,index) in pmUserListDictList" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预计启动日期">
        <a-date-picker v-decorator="['estStartDate',{rules: [{required: true, message: '请输入预计启动日期'}]}]" format="YYYY-MM-DD" style="width: 100%" placeholder="请选择预计启动日期" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预计完成日期">
        <a-date-picker v-decorator="['estEndDate',{rules: [{required: true, message: '请输入预计完成日期'}]}]" format="YYYY-MM-DD" style="width: 100%" placeholder="请选择预计完成日期" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="实际启动日期">
        <a-date-picker v-decorator="['startDate']" format="YYYY-MM-DD" style="width: 100%" placeholder="请选择实际启动日期" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="实际结束日期">
        <a-date-picker v-decorator="['endDate']" format="YYYY-MM-DD" style="width: 100%" placeholder="请选择实际结束日期" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目所在城市">
        <a-select  style="width: 100%"  v-decorator="['city', {rules: [{ required: true, message: '请选择项目所在城市' }]}]" :allowClear="true">
          <a-select-option v-for="(d,index) in cityList_TableDict" :key="index" :value="d.key" >{{ d.value }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否出口项目">
        <a-input placeholder="是否出口项目" v-decorator="['export',{rules: [{required: true, message: '请输入是否出口项目'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="每月天数">
        <a-input placeholder="每月天数" v-decorator="['daysOfMon',{rules: [{required: true, message: '请输入每月天数'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="团建费用">
        <a-input placeholder="团建费用" v-decorator="['teambuildingFee',{rules: [{required: true, message: '请输入团建费用'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="奖金率">
        <a-input placeholder="奖金率" v-decorator="['bonusRate',{rules: [{required: true, message: '请输入奖金率'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="奖金预算">
        <a-input placeholder="奖金预算" v-decorator="['bonus']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合同额">
        <a-input placeholder="合同额" v-decorator="['amount',{rules: [{required: true, message: '请输入合同额'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="人力成本">
        <a-input placeholder="人力成本" v-decorator="['manpower']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="各项补贴">
        <a-input placeholder="各项补贴" v-decorator="['allowance']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="软件采购成本">
        <a-input placeholder="软件采购成本" v-decorator="['software']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="硬件采购成本">
        <a-input placeholder="硬件采购成本" v-decorator="['hardware']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="外包人员成本">
        <a-input placeholder="外包人员成本" v-decorator="['outsourcing']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预估总成本">
        <a-input placeholder="预估总成本" v-decorator="['totalCost']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="税率">
        <a-input placeholder="税率" v-decorator="['taxRate',{rules: [{required: true, message: '请输入税率'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="不含税收入">
        <a-input placeholder="不含税收入" v-decorator="['execlTax']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预算占比">
        <a-input placeholder="预算占比" v-decorator="['budgetRatio']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预估利润">
        <a-input placeholder="预估利润" v-decorator="['profit']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预计利润占比">
        <a-input placeholder="预计利润占比" v-decorator="['profitRatio']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预估总人月数">
        <a-input placeholder="预估总人月数" v-decorator="['manMonth']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预估人均月成本">
        <a-input placeholder="预估人均月成本" v-decorator="['perCost']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="创建日期">
        <a-date-picker v-decorator="['createDate',{rules: [{required: true, message: '请输入创建日期'}]}]" format="YYYY-MM-DD" style="width: 100%" placeholder="请选择创建日期" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目状态">
        <a-select  style="width: 100%"  v-decorator="['status', {rules: [{ required: true, message: '请选择项目状态' }]}]" :allowClear="true">
          <a-select-option v-for="(d,index) in PROJECT_STATUSDictList" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结项日期">
        <a-input placeholder="结项日期" v-decorator="['closeDate']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="里程碑版本号">
        <a-input placeholder="里程碑版本号" v-decorator="['msVerion',{rules: [{required: true, message: '请输入里程碑版本号'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="累计回款金额">
        <a-input placeholder="累计回款金额" v-decorator="['repayment']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="累计回款比例">
        <a-input placeholder="累计回款比例" v-decorator="['repaymentRatio']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="立项状态">
        <a-select  style="width: 100%"  v-decorator="['appStatus', {rules: [{ required: true, message: '请选择立项状态' }]}]" :allowClear="true">
          <a-select-option v-for="(d,index) in sys_yes_noDictList" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="申请日期">
        <a-input placeholder="申请日期" v-decorator="['appDate']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="审批日期">
        <a-input placeholder="审批日期" v-decorator="['examDate']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="创建人">
        <a-input placeholder="创建人" v-decorator="['createEmp',{rules: [{required: true, message: '请输入创建人'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="申请人">
        <a-input placeholder="申请人" v-decorator="['appEmp']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="审批人">
        <a-input placeholder="审批人" v-decorator="['examEmp']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="审批理由">
        <a-input placeholder="审批理由" v-decorator="['examMemo']"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import moment from "moment";
import { dictList,getDictMapKey,tableDictList,getTableDictKey } from '@/utils/dict'
import { saveProject,getProjectInfo } from '@/api/project/proejct'
import pick from 'lodash.pick'

export default {
  name: 'ProjectModal',
  props: {
  },
  components: {
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      companyList:[],
      deptList:[],
      costomList:[],
      cityList:[],
      mdl: {},
      form: this.$form.createForm(this)
    }
  },
  beforeCreate () {
  },
  created () {
    this.dictSync();
  },
  methods: {
    async dictSync(){
      this.companyList_TableDict=await tableDictList('companyList');
      this.deptList_TableDict=await tableDictList('deptList');
      this.costomList_TableDict=await tableDictList('costomList');
      this.dictproTypeDictList=await dictList('dictproType');
      this.workTypeDictList=await dictList('workType');
      this.pmUserListDictList=await dictList('pmUserList');
      this.cityList_TableDict=await tableDictList('cityList');
      this.PROJECT_STATUSDictList=await dictList('PROJECT_STATUS');
      this.sys_yes_noDictList=await dictList('sys_yes_no');
    } ,
    add () {
      this.form.resetFields()
      this.edit()
    },
    edit (proId) {
      if(proId){
        getProjectInfo(proId).then(res => {
          this.mdl = Object.assign(res)
          this.mdl.estStartDate=moment(this.mdl.estStartDate);
          this.mdl.estEndDate=moment(this.mdl.estEndDate);
          this.mdl.startDate=moment(this.mdl.startDate);
          this.mdl.endDate=moment(this.mdl.endDate);
          this.mdl.createDate=moment(this.mdl.createDate);
          this.visible = true
          ;
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.mdl,'proId','proNo','proName','keywords','description','entId','departId','custId','proType','workType','pm','estStartDate','estEndDate','startDate','endDate','city','export','daysOfMon','teambuildingFee','bonusRate','bonus','amount','manpower','allowance','software','hardware','outsourcing','totalCost','taxRate','execlTax','budgetRatio','profit','profitRatio','manMonth','perCost','createDate','status','closeDate','msVerion','repayment','repaymentRatio','appStatus','appDate','examDate','createEmp','appEmp','examEmp','examMemo'))
          })
        })
      }else{
        this.visible = true
        this.mdl={}
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.mdl,'proNo','proName','keywords','description','entId','departId','custId','proType','workType','pm','estStartDate','estEndDate','startDate','endDate','city','export','daysOfMon','teambuildingFee','bonusRate','bonus','amount','manpower','allowance','software','hardware','outsourcing','totalCost','taxRate','execlTax','budgetRatio','profit','profitRatio','manMonth','perCost','createDate','status','closeDate','msVerion','repayment','repaymentRatio','appStatus','appDate','examDate','createEmp','appEmp','examEmp','examMemo'))
        })
      }
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if(values.estStartDate!=null){
            values.estStartDate=values.estStartDate.format("YYYY-MM-DD");
          }
          if(values.estEndDate!=null){
            values.estEndDate=values.estEndDate.format("YYYY-MM-DD");
          }
          if(values.startDate!=null){
            values.startDate=values.startDate.format("YYYY-MM-DD");
          }
          if(values.endDate!=null){
            values.endDate=values.endDate.format("YYYY-MM-DD");
          }
          if(values.createDate!=null){
            values.createDate=values.createDate.format("YYYY-MM-DD");
          }
          console.log('Received values of form: ', values)
          this.confirmLoading = true
          saveProject(values).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.success(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
